<template>
    <require from="./em-chat-sidebar-left.css"></require>
    <div ref="sidebar" class="ui left visible ${isLeftBarHide ? 'hide-bar' : ''} sidebar tms-left-sidebar">
        <div class="tms-header">
            <h1 class="ui header" style="font-size: 20px;"><a href="/"><img ref="logoRef" src="img/tms-x32.png" alt=""></a><a class="my-theme" style="margin-left: 16px;" href="/admin">TMS沟通</a></h1>
            <input value.bind="filter" keyup.trigger="chatToUserFilerKeyupHanlder($event)" type="text" placeholder="过滤沟通频道|用户">
            <i show.bind="filter" title="清空过滤输入" click.delegate="clearFilterHandler()" class="close icon link"></i>
        </div>
        <div class="tms-body">
            <div scrollbar="scrollbar-macosx">
                <div ref="channelsRef" class="tms-channels">
                    <div class="title">
                        <h4 class="ui header my-theme"><i class="users icon my-theme"></i>频道 (${channels.length})</h4>
                        <i ref="createChannelRef" class="plus link circular icon my-theme"></i>
                    </div>
                    <div class="ui middle aligned selection list">
                        <a repeat.for="item of channels | sort:'title' | sortChannels" click.delegate="channelHandler()" title="${item.title}(${item.name})" show.bind="!item.hidden" href="#/chat/${item.name}" class="item ${(!isAt && item.name == chatTo) ? 'active' : ''}">
                            <i class="hashtag icon my-theme"></i>
                            <div class="content">
                                <div class="tms-name my-theme">${item.title} (${item.members.length})</div>
                                <div show.bind="item.newMsgCnt && item.newMsgCnt > 0" class="floating ui red empty circular label"></div>
                            </div>
                            <div class="actions">
                                <div if.bind="item.owner.username == loginUser.username" ui-dropdown class="ui right pointing dropdown">
                                    <i class="large ellipsis horizontal icon"></i>
                                    <div class="menu">
                                        <div class="item" click.delegate="membersMgrHandler(item)"><i class="users icon"></i>成员管理</div>
                                        <div class="item" click.delegate="subscribeHandler(item)"><i class="${(item.isSubscribed || isSubscribed(item)) ? 'hide' : 'eye'} icon"></i>${(item.isSubscribed || isSubscribed(item)) ? '取消订阅' : '订阅频道'}</div>
                                        <div class="item" click.delegate="editHandler(item)"><i class="edit icon"></i>编辑频道</div>
                                        <div class="divider"></div>
                                        <div class="item" style="color: red;" click.delegate="delHandler(item)"><i class="red trash outline icon"></i>删除频道</div>
                                    </div>
                                </div>
                                <div if.bind="item.owner.username != loginUser.username" ui-dropdown class="ui right pointing dropdown">
                                    <i class="large ellipsis horizontal icon"></i>
                                    <div class="menu">
                                        <div class="item" click.delegate="membersShowHandler(item)"><i class="users icon"></i>成员查看</div>
                                        <div class="item" click.delegate="subscribeHandler(item)"><i class="${(item.isSubscribed || isSubscribed(item)) ? 'hide' : 'eye'} icon"></i>${(item.isSubscribed || isSubscribed(item)) ? '取消订阅' : '订阅频道'}</div>
                                        <div class="divider"></div>
                                        <div class="item" style="color: red;" click.delegate="leaveHandler(item)"><i class="sign out icon"></i>离开频道</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="ui divider"></div>
                <div class="tms-users">
                    <div class="title">
                        <h4 class="ui header my-theme"><i class="user icon my-theme"></i>用户 (${users | count:'Online':'onlineStatus'} / ${users.length})</h4>
                        <!-- <i class="plus link circular icon"></i> -->
                        <i if.bind="isSuper || isAdmin" ref="createUserRef" class="plus link circular icon my-theme"></i>
                    </div>
                    <div ref="userListRef" class="ui middle aligned selection list">
                        <a repeat.for="item of users | sortUsers2:loginUser.username & signal:'sg-users-refresh'" click.delegate="userHandler()" title="${item.name}(@${item.username}) ${item.onlineDate | date:'MM-dd HH:mm'}${item.onlineDate ? ' 上线' : ''} ${item.level ? '\n职位: ' + item.level : ''} ${item.phone ? '\n座机: ' + item.phone : ''} ${item.mobile ? '\n手机: ' + item.mobile : ''} ${item.place ? '\n位置: ' + item.place : ''} ${item.hobby ? '\n爱好: ' + item.hobby : ''}" show.bind="!item.hidden" href="#/chat/@${item.username}" class="item my-theme ${(isAt && item.username == chatTo) ? 'active' : ''} ${!item.enabled ? 'disabled-user' : ''}" data-id="${item.username}">
                            <i style="font-weight: bold;" class="at icon my-theme"></i>
                            <div class="content">
                                <div class="tms-name my-theme">${item.username == loginUser.username ? '我' : (item.name ? item.name : item.username)} ${(item.onlineStatus == 'Online' ? '(在线)' : '') & signal:'sg-users-refresh'}</div>
                                <div show.bind="item.newMsgCnt && item.newMsgCnt > 0" class="floating ui red empty circular label"></div>
                            </div>
                            <div class="actions" show.bind="isSuper || (isAdmin && (item.creator == loginUser.username))">
                                <div ui-dropdown class="ui right pointing dropdown">
                                    <i class="large ellipsis horizontal icon"></i>
                                    <div class="menu">
                                        <div if.bind="item.enabled" class="item" click.delegate="editUserHandler(item)"><i class="edit icon"></i>编辑用户</div>
                                        <div if.bind="item.enabled" class="divider"></div>
                                        <div if.bind="item.enabled" class="item" style="color: red;" click.delegate="disableHandler(item)"><i class="red stop circle outline icon"></i>停用用户</div>
                                        <div if.bind="!item.enabled" class="item" style="color: red;" click.delegate="enableHandler(item)"><i class="red play circle outline icon"></i>启用用户</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tms-footer">
            <div class="ui inverted icon menu">
                <a target="_blank" href="#/blog" class="item"><i class="wikipedia icon my-theme"></i></a>
                <div class="ui animated fade button item" tabindex="0">
                    <div class="visible content my-theme">
                        <i class="home large icon" style="margin-right: 0;"></i>
                    </div>
                    <a class="hidden content my-theme" target="_blank" href="/">
                        转到系统主页
                    </a>
                </div>
                <div class="right menu">
                    <em-dropdown-links></em-dropdown-links>
                </div>
            </div>
        </div>
    </div>
    <em-confirm-modal em-confirm-modal.ref="confirmMd"></em-confirm-modal>
    <em-chat-channel-create login-user.bind="loginUser" trigger.bind="createChannelRef"></em-chat-channel-create>
    <em-user-create login-user.bind="loginUser" trigger.bind="createUserRef"></em-user-create>
    <em-chat-channel-edit channel.bind="selectedChannel" em-chat-channel-edit.ref="channelEditMd"></em-chat-channel-edit>
    <em-chat-channel-members-mgr users.bind="users" channel.bind="selectedChannel" onlines.bind="onlines" em-chat-channel-members-mgr.ref="channelMembersMgrMd"></em-chat-channel-members-mgr>
    <em-chat-channel-members-show channel.bind="selectedChannel" em-chat-channel-members-show.ref="channelMembersShowMd"></em-chat-channel-members-show>
    <em-user-edit view-model.ref="userEditVm"></em-user-edit>
    <em-confirm-modal view-model.ref="confirmVm"></em-confirm-modal>
</template>
